<template>
  <div>
    <header class="header">
        <div class="navbar">
            <div class="navbar-left-container">
                <a href="/" style="font-size:30px;color:orange;"> 
                ❤ ❤
                </a>
            </div>
            <div class="navbar-right-container">
                <div class="navbar-menu-container">
                    <!--<a href="/" class="navbar-link">我的账户</a>-->
                    <span class="navbar-link"></span>
                    <!-- <a href="javascript:void(0)" class="navbar-link">登录</a> -->
                    <!--<a href="javascript:void(0)" class="navbar-link">登出</a>-->
                    <div class="navbar-cart-container">
                        <span class="navbar-cart-count"></span>
                        <a class="navbar-link" href="/#/cart">
                            <svg class="navbar-cart-logo">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-cart"></use>
                            </svg>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </header>
  </div>
</template>

<script> 
export default {
  name: 'headerNav',
  data () {
    return { 
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped> 
</style>
